簡單了解了 HTML 中的元素與屬性後，接著來了解網頁的結構與組成吧O_<
以下是一個簡單的 HTML 範例與對應的說明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>嗨你好，我是一隻想成為<strong>前端</strong>的<strong>海獺</strong></div>
</body>
</html>
<!DOCTYPE html>
告訴瀏覽器這是一個使用 HTML5 寫成的網頁，瀏覽器才能正確解讀從伺服器收到的網頁資料。若沒有宣告這行，瀏覽器讀出來的結果，可能會跟預想的不太一樣。（然後畫面就壞惹）
<html> </html>
整個網頁的內容會被 <html> 標籤包覆住。又稱為根元素。一份完整的 HTML 文件，其內一定有 <head> 跟 <body>。
<head></head>
標頭。裡面是一些重要、但又不需呈現在瀏覽者面前的資訊（metadata）。例如網頁標題（title）、網頁編碼方式、網頁說明、CSS 連結、網站圖示等等。
宣告網頁編碼方式。<meta charset="UTF-8">
告訴瀏覽器，隨著裝置的不同來動態調整網頁的可視範圍（viewpoint）；對響應式網頁（Responsive Web Design，RWD） 來說，這是必須設定的屬性。<meta name="viewport" content="width=device-width, initial-scale=1.0">
連結外部資料，例：告訴瀏覽器需載入的 CSS 樣式（stylesheet）位址<link rel="stylesheet" href="styles.css">
呈現在網頁搜尋結果的網站介紹，可以改善 SEO（搜尋引擎最佳化，Search Engine Optimization）。<meta name="description"content="網站介紹">
<body> <body>
在網頁中，會讓瀏覽者看到的所有元素都放在這邊。例如圖片、文章、嵌入影片等各種的靜態資訊或互動部分（JavaScript，JS）。
要載入 JS 的話，建議是擺在 <body> 內的最後面，防止使用者進入網頁後，瀏覽器為了讀取 JS 而讓整個網頁停住，使整個畫面出不來。使用者感受不佳，覺得網頁壞了，結果網頁還沒跑完，就直接被關掉了QQ
明天來說說語意化元素吧O_<
參考資料
iThome鐵人賽
看影片追技術